<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<h:outputStylesheet name="screen.css" library="css" />
	<h:outputStylesheet name="parallax.css" library="css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="http://maps.google.com/maps/api/js?sensor=false"
		type="text/javascript"></script>
</h:head>
<h:body>

	<img src="resources/images/forest1.jpg" class="bg" />
	<div id="header">
		<a href="pages/stats.xhtml"
			style="padding-left: 10px; color: white; text-decoration: none">View
			statistics</a>
	</div>
	<div id="content">
		<div id="Parallax">
			<h:form prependId="false" style="margin: 0; padding: 0;">
				<div id="left" class="shadowed">
					<p:gmap center="#{mapBean.center}" zoom="#{mapBean.zoom}"
						type="ROADMAP" model="#{mapBean.mapModel}"
						style="margin: 0; padding: 0;width:640px; height:620px" id="map">
						<p:ajax event="markerDrag" listener="#{mapBean.onMarkerDrag}"
							update="map" />
						<p:ajax event="pointSelect" listener="#{mapBean.addMarker}"
							update="messages map" />
					</p:gmap>
				</div>
				<div id="right">
					<div id="opt" class="shadowed">
						<select id="polution_items" size="6" multiple="multiple">
							<option>Lead</option>
							<option>CO2</option>
						</select>
						<div id="transport_mode">
							<p:selectOneRadio layout="pageDirection" id="options"
								value="#{mapBean.mode}"
								style="font-size: 16px; color: white; float: left;">
								<f:selectItem itemLabel="walking" itemValue="walking" />
								<br />
								<f:selectItem itemLabel="driving" itemValue="driving" />
								<p:ajax listener="#{mapBean.reactionOnModeChange}" update="map" />
							</p:selectOneRadio>
							<div style="margin: 4px; padding: 0;">
								<p:selectOneRadio layout="pageDirection" id="state"
									value="#{mapBean.stateString}"
									style="font-size: 16px; color: white;">
									<f:selectItem itemLabel="surf" itemValue="surf" />
									<br />
									<f:selectItem itemLabel="waypoints" itemValue="waypoints" />
									<br />
									<f:selectItem itemLabel="start-finish" itemValue="startFinish" />
									<p:ajax listener="#{mapBean.reactionOnStateChange}"
										update="map" />
								</p:selectOneRadio>
							</div>
						</div>
					</div>
					<div id="statistics" class="shadowed">
						<div class="estimations">
							<h1 class="shadowe-text">Estimations</h1>
							<table class="stat_table"
								style="font-size: 13px; font-weight: bold;">
								<tr>
									<td>Distance:</td>
									<td class="data"><h:outputText value="#{mapBean.distance}" />
										m.</td>
								</tr>
								<tr>
									<td>Time:</td>
									<td class="data"><h:outputText value="#{mapBean.duration}" />
										min.</td>
								</tr>
							</table>
						</div>
						<div class="estimations">
							<h1 class="shadowe-text">Coordinates</h1>
							<h:panelGrid styleClass="stat_table" columns="2">
								<h:outputLabel value="Start point:" style="font-weight:bold" />
								<p:inputText value="#{mapBean.coordFrom}" size="20"
									styleClass="wide_elem" />
								<h:outputLabel value="End point:" style="font-weight:bold" />
								<p:inputText value="#{mapBean.coordTo}" size="20"
									styleClass="wide_elem" />
								<h:outputLabel id="from" value="Start:" style="font-weight:bold" />
								<p:inputText value="#{mapBean.addressFrom}" size="25"
									styleClass="wide_elem" />
								<h:outputLabel id="to" value="Destination:"
									style="font-weight:bold" />
								<p:inputText value="#{mapBean.addressTo}" size="25"
									styleClass="wide_elem" />
								<p:commandButton styleClass="button" value="Submit"
									action="#{mapBean.drawRoutByData}" update="map" />
							</h:panelGrid>
						</div>
						<div class="estimations">
							<h1 class="shadowe-text">Pollution</h1>
							<p:dataTable styleClass="stat_table" var="shit"
								value="#{mapBean.shitTable}">
								<p:column headerText="Polution type">
									<h:outputText value="#{shit.name}" />
								</p:column>
								<p:column headerText="Dose">
									<h:outputText value="#{shit.dose}" />
								</p:column>
							</p:dataTable>
						</div>
						<p:growl id="messages" showDetail="true" sticky="true" />
					</div>
				</div>
			</h:form>
		</div>
	</div>
</h:body>
</html>
